import React, { Component } from 'react'
//antd组件
import { Form, Card, Input, Button, message } from "antd";
//富文本编辑器模块
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
class Editor extends Component{
	//用一个变量保存富文本编辑器的内容
	constructor(){
		super()
		this.state={
			content:""
		}
	}
	//富文本编辑器的配置项
	state = {
	    editorState: BraftEditor.createEditorState()
	 }
	
	// clearContent = () => {
	//     this.setState({
	//       editorState: ContentUtils.clear(this.state.editorState)
	//     })
	//  }
	//富文本编辑器内容的保存
	submitContent = async () => {
		// 在编辑器获得焦点时按下ctrl+s会执行此方法
		// 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
		const htmlContent = this.state.editorState.toHTML()
		this.setState({
			content:htmlContent
		})
	}
    
	//富文本编辑器内容发生改变的时候触发这个函数
	handleChange = (editorState) => {
	    this.setState({ editorState })
	  }
	//自定义的价格验证规则
	priceValidate = (rule, value, callback)=>{
		if (value * 1 > 100) {
		  callback("价格不能大于100");
		} else {
		  callback();
		}
	}
	render(){
		console.log("富文本编辑器的内容",this.state.content)
		//获取一个antd表单的属性
		const { getFieldDecorator } = this.props.form;
		//表单的提交函数
		const handleSubmit =(e)=> {
			 e.preventDefault(); //阻止表单的默认提交行为
			//验证表单的内容是否符合
			this.props.form.validateFieldsAndScroll((err, values) => {
				if (!err) {
					//values代表表单里面的内容，已经写成对象的形式
					//将富文本编辑器的内容也加入到表单的内容里面去
					values.content=this.state.content
					console.log("values",values,this)
					console.log("表单内容未出错，可以调用接口提交")
				}else{
					message.error("请按要求输入正确的内容")
				}
			})
		}
		return(
			<Card
			  title="商品编辑"
			  extra={
			    <Button onClick={() =>this.props.history.push("/admin/products")}>
			      返回
			    </Button>
			  }
			>
				<Form onSubmit={e => handleSubmit(e)}>
					<Form.Item label="商品名称">
					  {getFieldDecorator("name", {
					    rules: [
					      {
					        required: true,
					        message: "请输入商品名称"
					      }
					    ]
					  })(<Input placeholder="请输入商品名称" />)}
					</Form.Item>
					<Form.Item label="商品价格">
					  {getFieldDecorator("price", {
					    rules: [
					      {
					        required: true,
					        message: "请输入商品价格"
					      },
						  {
							validator: this.priceValidate
						  }
					    ]
					  })(<Input placeholder="请输入商品价格" />)}
					</Form.Item>
					
					{/*富文本编辑器模块*/}
					<Form.Item label="商品详情">
						<BraftEditor
							value={this.state.editorState}
						    onChange={this.handleChange}
						    onSave={this.submitContent}
						/>
					</Form.Item>
					{/*提交模块*/}
					<Form.Item>
					  <Button htmlType="submit" type="primary">保存</Button>
					</Form.Item>
				</Form>
			</Card>
		)
	}
}
export default Form.create({ name: "productEdit" })(Editor);